<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .menu{position: absolute;left:-200px;top:400px;width:200px;}
        .menu .btn{width:30px;background: #ccc;line-height: 30px;text-align:center;height:60px;position: absolute;right:-30px;top:10px;}
        .menu .x{width:200px;height:80px;background:#efefef;position: absolute;}
        .menu .y{width:200px;height:0px;background: #aaa;position: absolute;top:0px;overflow: hidden;}
    </style>
</head>
<body>
    <div class="menu">
        <div class="btn">分享</div>
        <div class="x">这是横向内容</div>
        <div class="y">这是纵向内容</div>
    </div>
</body>
<script src="../move.js"></script>
<script>
    const obtn = document.querySelector(".btn");
    const omenu = document.querySelector(".menu");
    const oy = document.querySelector(".y");

    // 提前设定按钮的状态库
    const STATUS = {
        show: Symbol(),
        hide: Symbol()
    }

    // 设置初始状态
    let now = STATUS.show;

    obtn.onclick = function(){
        // 判断状态，根据状态决定执行的功能
        if(now === STATUS.show){
            // 显示时，先显示横向
            move(omenu, {
                left: 0
            }, ()=>{
                // 横向显示完成后，显示纵向
                move(oy, {
                    top:-300,
                    height:300
                })
            })
            // 修改状态
            now = STATUS.hide
        }else{

            move(oy, {
                top:0,
                height:0
            }, ()=>{
                move(omenu, {
                    left: -200
                })
            })

            now = STATUS.show
        }
    }

</script>
</html>